<template>
	<view class="othello-page">
	  <view class="game-info">
		<view class="player-info" :class="{ active: currentPlayer === 'black' }">
		  <text>黑棋: {{ playerCounts.black }}</text>
		</view>
		<view class="player-info" :class="{ active: currentPlayer === 'white' }">
		  <text>白棋: {{ playerCounts.white }}</text>
		</view>
	  </view>
	  
	  <view class="status-message">
		<text v-if="gameStatus === 'playing'">
		  当前: {{ currentPlayer === 'black' ? '黑棋' : '白棋' }}回合
		</text>
		<text v-else-if="gameStatus === 'won'">
		  {{ winner === 'black' ? '黑棋' : '白棋' }}获胜!
		</text>
		<text v-else-if="gameStatus === 'draw'">
		  平局!
		</text>
	  </view>
	  
	  <!-- 给组件添加 ref -->
	  <othello-board ref="othelloBoardRef" />
	  
	  <button class="restart-btn" @click="restartGame">重新开始</button>
	</view>
  </template>

  <script setup>
  import { computed, ref, nextTick } from 'vue'
  import { useGameStore } from '@/stores/game'
  import OthelloBoard from '@/components/OthelloBoard.vue'

  const store = useGameStore()
  // 定义 ref
  const othelloBoardRef = ref(null)

  const currentPlayer = computed(() => store.currentPlayer)
  const gameStatus = computed(() => store.gameStatus)
  const winner = computed(() => store.winner)
  const playerCounts = computed(() => {
	let black = 0
	let white = 0
	const board = store.boardState
	
	for (let row = 0; row < 8; row++) {
	  for (let col = 0; col < 8; col++) {
		if (board[row][col] === 'black') black++
		if (board[row][col] === 'white') white++
	  }
	}
	
	return { black, white }
  })

  const restartGame = () => {
    store.initGame()
    nextTick(() => {
      if (othelloBoardRef.value && othelloBoardRef.value.initBoard) {
        othelloBoardRef.value.initBoard()
      } else {
        console.error('无法找到 OthelloBoard 组件或 initBoard 方法')
      }
    })
  }
  </script>

  <style scoped>
  .othello-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
	min-height: 100vh;
	background-color: #f5f5f5;
  }
  
  .game-info {
	display: flex;
	justify-content: space-around;
	width: 100%;
	max-width: 500px;
	margin-bottom: 15px;
  }
  
  .player-info {
	padding: 10px 20px;
	background-color: #fff;
	border-radius: 20px;
	font-weight: bold;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .player-info.active {
	background-color: #4aa36d;
	color: white;
  }
  
  .status-message {
	margin-bottom: 20px;
	font-size: 18px;
	font-weight: bold;
  }
  
  .restart-btn {
	margin-top: 20px;
	padding: 10px 30px;
	background-color: #4aa36d;
	color: white;
	border: none;
	border-radius: 20px;
	font-size: 16px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  </style>